/**
 * 2. 调节方式-调度图
 */
/*var woChartCurrent = 0;
var woChartStep = 190;
var woChartMin = 0 - (woChartStep * (pictureSet.length - 3));
var woChartMax = 0;
var woSchedulingChart;

function woUpPage(){
	if(woChartMin >= 0)return ;
	woChartCurrent = woChartCurrent - woChartStep;
	if(woChartCurrent < woChartMin)woChartCurrent = woChartMin;
	$('#movepanel').animate({top: woChartCurrent + 'px'},"slow");
}

function woDownPage(){
	if(woChartMin >= 0)return ;
	woChartCurrent = woChartCurrent + woChartStep;
	if(woChartCurrent > woChartMax)woChartCurrent = woChartMax;
	$('#movepanel').animate({top: woChartCurrent + 'px'},"slow");
}*/
Ext.define('Admin.view.waterOptimum.submodule.schedulingChart',{
	extend:'Ext.panel.Panel',
	xtype:'woSchedulingChart',
	//起别名
	alias:'woSchedulingChart',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	margin: '0 10 10 10',
	border: false,
	chartData: [
		{id: 0, index1: '洪门水库', index2: "resources/images/wateroptimum/schemechart.png", index4:92, index5:104, index3: [{
	        name: 'I区',
	        data: [100, 100, {
	        	y: 100,
	            dataLabels: {
	            	enabled: true,
	            	y: 40,
	            	format: '{series.name}',
	            	style: {fontSize: '18px', fontWeight: 'normal'}
	            }
	        }, 100, 100, 99, 99, 100, 100, 100, 100, 100],
	        fillOpacity: 0,
	        dashStyle: 'dash'
	    }, {
	        name: 'II区',
	        data: [96, 96, 96, {
	        	y: 96,
	            dataLabels: {
	            	enabled: true,
	            	y: 40,
	            	format: '{series.name}',
	            	style: {fontSize: '18px', fontWeight: 'normal'}
	            }
	        }, 96, 95, 95, 96, 96, 96, 96, 96],
	        fillOpacity: 0,
	        dashStyle: 'dash'
	    }]},
		{id: 1, index1: '廖坊水库', index2: "resources/images/wateroptimum/schemechart.png", index4:61, index5:68, index3: [{
	        name: 'I区',
	        data: [65, 65, {
	        	y: 65,
	            dataLabels: {
	            	enabled: true,
	            	y: 40,
	            	format: '{series.name}',
	            	style: {fontSize: '18px', fontWeight: 'normal'}
	            }
	        }, 65, 65, 64, 64, 65, 65, 65, 65, 65],
	        fillOpacity: 0,
	        dashStyle: 'dash'
	    }, {
	        name: 'II区',
	        data: [63, 63, 63, {
	        	y: 63,
	            dataLabels: {
	            	enabled: true,
	            	y: 40,
	            	format: '{series.name}',
	            	style: {fontSize: '18px', fontWeight: 'normal'}
	            }
	        }, 63, 63, 63, 63, 63, 63, 63, 63],
	        fillOpacity: 0,
	        dashStyle: 'dash'
	    }]}
	],
	getChartConfig:function(data){
		return {
		    chart: {
		        type: 'area'
		    },
		    title: {
		        text: null
		    },
		    xAxis: {
		        allowDecimals: false,
		        labels: {
		            formatter: function () {
		                return this.value + '月'; // clean, unformatted number for year
		            }
		        }
		    },
		    yAxis: {
		        title: {
		            text: '水位(m)'
		        },
		        labels: {
		            formatter: function () {
		                return this.value / 1 + '';
		            }
		        },
		        min: data.index4,
		        max: data.index5
		    },
		    legend: {
		    	enabled: false
		    },
		    tooltip: {
		    	headerFormat: null,
		        pointFormat: '{point.x}月 <br/>水位低于 <b>{point.y:,.0f}</b><br/>{series.name}出力 '
		    },
		    plotOptions: {
		        area: {
		            pointStart: 1,
		            marker: {
		                enabled: false,
		                symbol: 'circle',
		                radius: 2,
		                states: {
		                    hover: {
		                        enabled: true
		                    }
		                }
		            }
		        }
		    },
		    series: data.index3
		};
	},
	drawChart: function(data){
		var config = this.getChartConfig(data);
		this.query('wohighchart')[0].chartDraw(config);
		this.query('container[localId=ctitle]')[0].setHtml('<div style="text-align: center;font-size: 16px;font-weight:bold;height:35px;line-height:35px;background-color:#fce4d6;">'+data.index1+'</div>');
	},
	items:[{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		items:[{
			xtype: 'panel',
			localId: 'ctitle',
			height: 35,
			html: '<div style="text-align: center;font-size: 16px;font-weight:bold;height:35px;line-height:35px;background-color:#fce4d6;">洪门水库</div>'
		},{
			xtype: 'wohighchart',
			border: false,
			flex:1
		}] ,
		flex:1
	},{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
		width: 260,
		padding: '0 0 0 20',
		items:[{
			height: 20,
			xtype: 'panel',
			localId: 'clistup',
			html:'<div style="height:100%;width:100%;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="woDownPage()">▲</div>'
		},{
			xtype: 'panel',
			localId: 'clistmain',
			flex:1,
			html: ''
		},{
			height: 20,
			xtype: 'panel',
			localId: 'clistdown',
			html:'<div style="height:20px;width:240px;cursor: pointer;text-align: center;color: #FFFFFF;background-color: #c8e4fc;" onclick="woUpPage()">▼</div>'
		}]
	}],
	getChartScroll: function(data){
		var output = '';
		output += '<div style="background-color:#ddebf7;height:100%;width:100%;padding: 0px 0px 0px 0px;overflow: hidden;">';
		
		output += '<div sid="movepanel" style="position: relative;">';
		
		output += this.singleChartScroll(data[0].id, data[0].index1, data[0].index2, true);
		for(var i=1;i<data.length;i++){
			output += this.singleChartScroll(data[i].id, data[i].index1, data[i].index2, false);
		}
		
		output += '</div>';
		
		output += '</div>';
		return output;
	},
	singleChartScroll: function(id, name, path, isHighlighted){
		var output = '';
		if(isHighlighted)output += '<div sid="woSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px; background-color:#acb9ca;">';
		else output += '<div sid="woSClistitem'+id+'" style="width:240px;padding: 20px 20px 20px 20px;">';
		output += '<div style="text-align:center;">';
		output += '<div style="font-size: 15px;font-weight:bold;height:30px;line-height:30px;background-color:#fce4d6;width:200px;">'+name+'</div>';
		output += '<img teckid='+id+' src="'+path+'" style="height:120px;width:200px;cursor: pointer;"/>';
		output += '</div>';
		output += '</div>';
		return output;
	},
	getDiv: function(sid){
		var divs = document.getElementById(this.getId()).getElementsByTagName('div');
		for(var i=0;i<divs.length;i++){
			if(divs[i].getAttribute("sid") == sid)return divs[i];
		}
		return null;
	},
	generateList: function(){
		var panel = this;
		var contain = this.query('panel[localId=clistmain]')[0];
		contain.setHtml(this.getChartScroll(this.chartData));
		var images = document.getElementById(contain.getId()).getElementsByTagName('img');
		for(var i=0;i<images.length;i++){
			images[i].onclick = function(obj){
				panel.changeView(obj.target.getAttribute("teckid"));
			};
		}
	},
	changeView: function(id){
		var item;
		var pictureSet = this.chartData;
		for(var i=0;i<pictureSet.length;i++){
			if(pictureSet[i].id == id){
				item = pictureSet[i];
			}
			this.getDiv('woSClistitem'+i).style.backgroundColor = '#ddebf7';
		}
		this.drawChart(item);		
		this.getDiv('woSClistitem'+id).style.backgroundColor = '#acb9ca';
	},
	initAction: function(){
		this.drawChart(this.chartData[0]);
		this.generateList();
	},
	displayData: function(result){
		console.log(result);
		this.chartData = result.data;
		this.initAction();
	},
	listeners: {
		boxready: {
			fn: function(){
				
			}
		}
	}	
});